<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="test"></div>
    <a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
        <img src="../../asset/github.png" alt="" />
    </a>
    <!--[if lt IE 9]><script type="text/javascript" crossorigin="anonymous" src="//s.url.cn/qqun/xiaoqu/buluo/p/js/es5-sham-es5-sham.min.77c4325f.js"></script><![endif]-->
    <script src="../../dist/omi.js"></script>
    <script>

        var Todo =  Omi.create("Todo",{
            add :function(evt) {
                if(evt.preventDefault){
                    evt.preventDefault();
                }else{
                    evt.returnValue = false;
                }
                this.textBox = this.node.querySelector("input");
                this.data.items.push(this.textBox.value);
                this.update();
                this.textBox.value = "";
            },
            style:function () {
                return 'h3 { color:red; }\
                button{ color:green;}';
            },
            render:function(){
                return '<div>\
                            <h3>TODO</h3>\
                            <ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>\
                            <form onsubmit="add(event)" >\
                                    <input type="text"  />\
                                    <button>Add #{{items.length}}</button>\
                            </form>\
                    </div>';
            }
        })

        Omi.render(new Todo({ items: [] }),'#test');
    </script>
</body>
</html>